<template>

    <!-- 首页分区内容 -->
    <div style="margin-top: 50px">

        <div class="title">
            <el-link :underline="false">{{ data.title }}</el-link>
            <el-link :underline="false" @click="goto('/category' + page)">更多<i class="el-icon-caret-right"></i></el-link>
        </div>

        <div class="wrap">
            <div class="item-logo">
                <img :src="staticPrefix + data.logoImg">
            </div>

            <div class="productItemPrent-wrap">
                <ProductItem :item="item" v-for="(item,index) in data.productList" :key="index"></ProductItem>

<!--                <el-card class="box-card" shadow="hover"
                         v-if="data.productList.length < 8"
                         :body-style="moreStyle">
                    <div style="display: flex;justify-content: center;align-items: center;">
                        <div class="">
                            <p style="margin-right: 10px">
                                <el-link :underline="false" style="font-size: 20px">浏览更多</el-link>
                            </p>
                            <p>
                                <el-link type="info" :underline="false">热门</el-link>
                            </p>

                        </div>
                        <i class="el-icon-right" style="font-size: 63px;color: rgb(255,103,0);"></i>
                    </div>
                </el-card>-->

            </div>
        </div>

    </div>
</template>

<script>
    import settings from '@/settings'
    import ProductItem from "@components/product/ProductItem";

    export default {
        name: "IndexCategory",
        props: ['page','data'],
        components:{ProductItem},
        data(){
            return{
                staticPrefix: settings.staticPrefix,
                cardBodyStyle:{
                    padding: '0 5px',
                    height: '290px',
                    overflow: 'hidden',
                    cursor: 'pointer'
                },
                moreStyle:{
                    padding: '0px 5px',
                    width: '250px',
                    height: '200px',
                    cursor: 'pointer',
                    display: 'flex',
                    justifyContent: 'center',
                }
            }
        },
        methods:{
            goto(page){
                this.$router.push(page);
            },
        },
        mounted(){
            //console.log("indexCategory.vue",this.data)
        },
    }
</script>

<style scoped>
    .title{
        display: flex;
        justify-content: space-between;
        padding: 0 5px;
        margin-bottom: 10px;
    }
    .title a{
        font-size: 25px;
    }

    .wrap{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .item-logo{
        margin-right: 20px;
        transition: all 0.3s;
    }
    .item-logo img{
        height: 600px;
    }
    .item-img-wrap{
        margin: 0 auto 18px;
        width: 160px;
        height: 160px;
    }

    .productItemPrent-wrap{
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
    }

    .item-img-wrap img{
        width: 160px;
        height: 160px;
    }
    .item-text-wrap{
        display: flex;
        flex-direction: column;
    }
    .item-text-wrap a{
        margin-bottom: 10px;
    }
    .item-text-wrap a:nth-child(2){
        margin-bottom: 20px;
    }
    >>>.el-link--inner{
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    /*hover*/
    .item-logo:hover,.el-card:hover{
        z-index: 2;
        -webkit-box-shadow: 0 15px 30px rgba(0,0,0,.1);
        box-shadow: 0 15px 30px rgba(0,0,0,.1);
        -webkit-transform: translate3d(0,-2px,0);
        transform: translate3d(0,-2px,0);
    }



    @media (max-width: 1300px){
        .item-logo{
            display: none;
        }
    }
</style>
